<!-- 模板 -->
<template>
  <div class="box">
    <section>
      <div class="message">
        <!-- 1.头部 -->
        <div class="header">
          <van-icon
            name="arrow-left"
            class="head-left-icon"
            @click="$router.go(-1)"
          />
          <span class="name">名片天下小分队</span>
        </div>
        <ul class="mag-ul" ref="jia">
          <li :class="item.class" v-for="(item, index) in list" :key="index">
            <img :src="item.url" alt="" />
            <span>{{ item.txt }}</span>
          </li>
        </ul>
      </div>
    </section>
    <van-cell-group>
      <van-field left-icon="smile-o" v-model="value" placeholder="请输入文本" />
      <template>
        <van-button type="primary" @click="search()">发送</van-button>
      </template>
    </van-cell-group>
  </div>
</template>
<script>
// import request from '../utils/request.js'
export default {
  name: "",
  data() {
    return {
      value: "",
      list: [
        {
          url: "http://42.192.80.102/Printing man-img/beauty-girl.png",
          txt: "你好",
          class: "li1",
        },
      ],
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    fn() {
      this.$router.push("/news");
    },
    search() {
      if (this.value === "") {
        return;
      }
      this.list.push({
        url: "http://42.192.80.102/Printing man-img/tuceng.png",
        txt: this.value,
        class: "li2",
      });
      this.value = "";
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.box {
  margin-top: 0.88rem;
}
.header {
  position: fixed;
  width: 100%;
  height: 0.88rem;
  left: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  background: #fff;
  z-index: 999;
  .name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.3rem;
  }
  .head-left-icon {
    padding-left: 0.2rem;
    font-size: 0.5rem;
    color: #aaa;
  }
}
.mag-ul {
  .li1 {
    padding: 0.2rem;
    display: flex;
    align-items: center;
    img {
      width: 0.6rem;
      height: 0.6rem;
    }
    span {
      margin-left: 0.2rem;
      display: block;
      padding: 0.24rem;
      background: #f2f2f2;
      border-radius: 0.1rem;
      position: relative;
      max-width: 3rem;
      font-size: 0.24rem;
      &::before {
        position: absolute;
        left: -0.4rem;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        content: "";
        border: 0.2rem solid;
        border-color: transparent #f2f2f2 transparent transparent;
      }
    }
  }
  .li2 {
    padding: 0.2rem;
    display: flex;
    justify-content: end;
    position: relative;
    display: flex;
    align-items: center;
    img {
      width: 0.6rem;
      height: 0.6rem;
      position: absolute;
      right: 0.2rem;
    }
    span {
      margin-right: 0.8rem;
      display: block;
      padding: 0.24rem;
      background: #028d2c;
      border-radius: 0.1rem;
      position: relative;
      max-width: 3rem;
      font-size: 0.24rem;
      &::after {
        position: absolute;
        left: 99%;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        content: "";
        border: 0.2rem solid;
        border-color: transparent transparent transparent #028d2c;
      }
    }
  }
}

.van-cell-group {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  border: none;
  align-items: center;
  padding: 0 0.2rem;
  /deep/.van-cell {
    display: flex;
    align-items: center;
    .van-field__left-icon {
      .van-icon {
        font-size: 0.5rem;
        color: #c4c4c4;
      }
    }
  }

  /deep/.van-field__body {
    input {
      border: 1px solid #c4c4c4;
      padding: 0.1rem;
      border-radius: 0.1rem;
      font-size: 0.24rem;
      height: 0.72rem;
    }
  }
  .van-button {
    width: 1.4rem;
    font-size: 0.24rem;
    height: 0.72rem;
    /deep/.van-button__content {
      font-size: 0.24rem;
    }
  }
}
</style>
